<template>
    <div id = "My">
        <div class="heard">
            <img src="../assets/Mymi/MySet.png" @click="MySet" class="heard-set">
            <div class="heard-portraitBox">
                <img :src="headPortrait" v-if="headPortrait" @click="GetMyPortrait" class="heard-portraitBoxImg">
                 <img :src="MyPortraitImg" v-else @click="GetMyPortrait" class="heard-portraitBoxImg">
                 <!-- <span class="heard-portraitBoxSpan"  @click="GetMyPortrait">{{MyIntimate}}</span> -->
                <span class="heard-portraitBoxSpan"  @click="GetMyPortrait">{{MyIntimate}}</span>
            </div>
            <div class="heard-bottom">
                <div class="heard-bottom-left" @click="Information">
                    <div>
                        <img src="../assets/Mymi/MyInformation.png">
                        <span class="message" v-show="Message != 0"></span>
                    </div>
                    <div>
                        <span>消息</span>
                    </div>
                </div>
                <div class="heard-bottom-right" @click="InformationRight">
                    <div>
                        <img src="../assets/Mymi/MyLocation.png">
                    </div>
                    <div>
                        <span>认证</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="Money">
            <div class="Money-box">
                <div class="Money-boxTOp">
                    <span>余额（元）</span>
                </div>
                <div class="Money-boxCenter">
                    <div>
                        <span>{{balanceMoney}}</span>
                    </div>
                    <div>
                        <p class="withdrawMoney">
                            <img src="../assets/Mymi/MyWithdraw.png" class="withdrawMoneyImgOne">
                            <span @click="MywithdrawTo">提现</span>
                            <img src="../assets/Mymi/MywithdrawTo.png" class="withdrawMoneyImg" @click="MywithdrawTo">
                        </p>
                    </div>
                </div>
                <div class="Money-boxBottom">
                    <div style="display:inline-block;" @click="MyDetailMoney">
                        <span>查看明细</span>
                        <img src="../assets/Mymi/MywithdrawTo.png" class="withdrawMoneyTrwo">  
                    </div>
                </div>
            </div>
        </div>
         <!-- 邀请好友 -->
        <div class="friends">
            <div @click="code">
                <img src="../assets/Mymi/inviteFriends.png" alt="">
            </div>
        </div>
        <!-- 我要当代理 -->
        <div class="agency">
            <div @click="Agency">
                <span class="agencyOne">成为代理商</span>
                <span class="agencyTwo">立即申请</span>
                <img src="../assets/index/jiantou.png" >
            </div>
        </div>
        <!-- 我的任务 -->
        <div class="MyTeam">
            <div class="TeamBox" @click="myTeam">
               <p>我的团队</p>
               <div>
                    <span class="TeamOne">已邀请</span>
                    <span class="TeamTwo">{{teamNum}}人</span>
                    <img src="../assets/index/jiantou.png" >
               </div>
            </div>
        </div>
        <div class="MyTask">
            <div class="MyTask-Box">
                <div class="MyTask-Box-top">
                    <span>我的任务</span>
                </div>
                <div class="MyTask-Box-bottom">
                    <div class="MyTask-Box-bottomFelt">
                        <span @click="MyProceed">{{Proceed}}</span>
                        <span>进行中</span>
                    </div>
                    <div class="MyTask-Box-bottomRight">
                        <span @click="MyAccomplish">{{Accomplish}}</span>
                        <span>已完成</span>
                    </div>
                </div>

            </div>
        </div>

        <div class="MyCommonTools">
            <div class="MyCommonTools-Box">
                <div class="MyCommonTools-BoxTop">
                    <span>常用工具</span>
                </div>
               
                    <div class="VillageHeat-button">
                        <div class="VillageHeat-button-box" v-for="(item,index) in VillageHeatButtonBox"
                            :key="index"
                         >
                        <img :src="item.url" @click="geturl(item.path)">
                        <p>{{item.name}}</p>
                        </div>
                    </div>
            </div>
        </div>
        <!-- 身份认证弹窗 -->
        <div class="showModel" v-show="showModel">
        <div class="showBox">
            <div class="one">
            <i class="iconfont iconshanchuguanbicha" @click="closeShowModel"></i>
            </div>
            <div class="two">{{authentication}}</div>
            <div class="three">
            <img src="../assets/task/shnefen.png" alt />
            </div>
            <div class="four" @click="goRealName" v-show="Noauthentication">立即认证</div>
        </div>
        </div>
        
        <div class="buttom-tab">
            <tabBar></tabBar>
        </div>
        
    </div>
</template>
<script>
import tabBar from '../components/tabBar';
import { Toast } from "vant";
export default {
    name:"My",
    data() {
        return {
            MyPortrait: "",
            MyIntimate: "昵称",
            heardBottomText: "",
            MyMoney: "",
            Proceed: "0",
            Accomplish : "0",
            message:"",
            MyuserId:"",//用户id
            VillageHeatButtonBox :[
                {url:require("../assets/index/index01.png"),name:"村部通知",path: {path:"/notice",query:{value:"村部通知",GotBack:"Mymi"}}},
                {url:require("../assets/index/index02.png"),name:"村内事",path: {path:"/notice",query:{value:"村内事",GotBack:"Mymi"}}},
                {url:require("../assets/index/index03.png"),name:"需求",path: {path:"/notOpen",query:{value:"需求",paths:"Mymi"}}},
                {url:require("../assets/index/index04.png"),name:"扶贫政策",path: {path:"/notOpen",query:{value:"扶贫政策"}}},
                {url:require("../assets/index/index05.png"),name:"救助扶贫",path: {path:"/notOpen",query:{value:"救助扶贫"}}},
                {url:require("../assets/index/index06.png"),name:"致富经",path: {path:"/notOpen",query:{value:"致富经"}}},
                {url:require("../assets/index/index07.png"),name:"种养技术",path: {path:"/notOpen",query:{value:"种养技术"}}},
                {url:require("../assets/index/index08.png"),name:"意见建议",path: {path:"/FeedOPen",query:{value:"意见建议"}}},
                ],
            url:"",
            showModel: false,
            authentication:"身份认证",
            Noauthentication:true,
            // =============,
            balanceMoney:"",//余额
            teamNum:"",//团队人数
            headPortrait:localStorage.getItem("imgperson"),

        }
    },
    components:{
       tabBar
    },
    mounted () {
       
        // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
       
        
    },
  
    computed:{
        VillageText(){
            return this.heardBottomText == null || "" ? "未选择" : this.heardBottomText;
        },
        MyPortraitImg(){
            return this.MyPortrait == this.url || this.MyPortrait == "" ? require("@/assets/Mymi/village.png") : this.MyPortrait;
        },
        Message(){
            return this.message > 100 ? "99+" : this.message
        }

    },
     destroyed(){
        // 销毁监听浏览器事件
            window.removeEventListener('popstate', this.goBack, false);
    },
    created (){
        this.userMoney();
         this.loadComments();
        this.url = window.domain;
        this.myTeamPerson ();//获取团队人数
        this.taskProgress();//进行中的任务
        this.number()//进行中的任务人数
        this.MyIntimate=localStorage.getItem("nickName");
    },  
    methods: {
        //取出用户id
        loadComments() {
        var list = JSON.parse(localStorage.getItem("key"));
        this.MyuserId = list.userId;
        },
        MySet(){
            this.$router.push("/MySet");
        },
        GetMyPortrait(){
            this.$router.push("/MyPortrait");
            // console.log(this.$route.query);
        },
        Information(){
            this.$router.push("/myInfo");
        },
        InformationRight(){
            this.$router.push({path:"/Autonym",query:{theme:"实名认证",url:"/Mymi"}});
        },
        MywithdrawTo(){
            // this.$router.push("/MywithdrawTo");
            this.$router.push("/MywithdrawToSC");
        },
        MyDetailMoney(){
            this.$router.push("/walletDetails");
        },
        MyProceed(){
            // this.$router.push({path:"/task",query:{task:"task"}});
            this.$router.push({path:"/MyAssignment"});
        },
         MyAccomplish(){
            // this.$router.push({path:"/task",query:{task:"task"}});
             this.$router.push({path:"/MyAssignment"});
        },
         //审核状态
        openShowModel(url){
            this.$axios.get("/user/auth/selectAuthUId?id="+this.MyuserId
            ).then(res =>{
                // console.log("审核状态",res);
                if(res.data.code == 0){
                    if(res.data.data == 0){
                        this.showModel = true;
                        this.authentication = "正在审核中";
                        this.Noauthentication = false
                        // Toast("正在实名制认证审核中")
                    }
                    else if(res.data.data == 2 || res.data.data == 4){
                        this.showModel = true;
                        this.authentication = "身份认证";
                        this.Noauthentication = true;
                        // Toast("请提交实名制认证")
                    }
                    else{
                        this.$router.push(url);
                    }
                }
            
            })
        },
        geturl(url){
            // console.log(url)
            if(url.path == "/FeedOPen" && url.query.value == "意见建议"){
                this.openShowModel(url);
            }
            else if(url.path == "/notice" && url.query.value == "村内事"){
                this.openShowModel(url);
            }
            else{
                this.$router.push(url);
            }
            
        },
        goRealName() {
            this.$router.push({path:"/Autonym",query:{theme:"实名认证",url:"/Mymi"}});
        },
         //关闭身份认证弹窗
        closeShowModel() {
            this.showModel = false;
        },
        goBack(){
            mui.init({
                keyEventBind: {
                   backbutton: true, //关闭back按键监听
                }
            })
            //首页返回键处理
            // 处理逻辑： 1s内，连续两次按返回键，则退出应用；
            var first = null;
            mui.back = function(){
                // 首次按键， 提示 再按一次退出应用
                if(!first){
                first = new Date().getTime();//记录第一次按下回退键的时间
                mui.toast("再按一次退出应用");
                //   history.go(-1); // 回退到上一页
                setTimeout(function(){
                    //1s 后清除
                    first = null;
                }, 1000);

                }
                else{
                if(new Date().getTime() - first < 1000){
                    //如果两次按下的时间小于1s
                    plus.runtime.quit(); //那么就退出app
                }
                }
            }
                
        },
        //邀请好友
        code(){
            this.$router.push("/inviteFriends");
        },
        //我的团队
        myTeam(){
            this.$router.push("/myTeam");
        },
        //成为代理
        Agency(){
            this.$router.push("/Agency");
        },
        // ===============================
        userMoney (){
            this.$axios.post("/cct/money/userMoney",{}).then(res =>{
                 console.log("余额",res)
                if(res.data.code==0){
                    this.balanceMoney=res.data.data.money;
                }
            })
        },
           //我的团队
        myTeamPerson (){
            this.$axios.post("/cct/invite/userInvitationList",{
            }).then(res =>{
                console.log("团队人数",res)
                if(res.data.code==0){
                    this.teamNum = res.data.total;
                }
            })
        },
        //我的任务
        //进行中
        taskProgress () {
            var userId =JSON.parse(localStorage.getItem("key")).userId;

            console.log(userId)
            this.$axios.post("/cct/myjob/findByUserId",{
                userId
            }).then(res =>{
                console.log('进行中的任务',res)
                if(res.data.code==0){

                }
            })
        },
        //请求个数
        number(){
            var userId =JSON.parse(localStorage.getItem("key")).userId;
            this.$axios.post("/cct/myjob/findJobNumByStatus",{
                userId
            }).then(res =>{
                console.log('进行中的任务个数',res)
               if(res.data.code==0){
                    this.Proceed=res.data.data.工作中
                     this.  Accomplish=res.data.data.已完成
               }
                
            })
        }
       
    }
}
</script>
<style lang="less" scoped>
#My{
    width: 100%;
    height: 100%;
    background: rgb(248, 248, 248);
    position: absolute;
    top:0rem;
    left: 0rem;
    .heard{
        width: 100%;
        height: 3.74rem;
        background-image: url("../assets/Mymi/MyHeard.png");
        background-size: 100% 3.74rem;
        .heard-set{
            width: .34rem;
            height: .36rem;
            margin-left: 6.86rem;
        }
        .heard-portraitBox{
            width: 100%;
            height: 1.92rem;
            display: flex;
            .heard-portraitBoxImg{
                width: 1.24rem;
                height: 1.24rem;
                margin-top: .06rem;
                margin-left: .5rem;
                border-radius: 50%;
            }
            .heard-portraitBoxSpan{
                font-size: .3rem;
                font-family: "PingFang-SC-Medium";
                color: #FFFFFF;
                margin-left: .29rem;
                margin-top: .48rem;
            }
    
        }
        // /* 消息 */
        .heard-bottom{
            width: 6.9rem;;
            height: .98rem;
            margin: 0 auto;
            border-radius: .2rem;
            background: white;
            border: 1px solid rgba(210,227,211,0.5);
            font-size: .26rem;
            display: flex;
            .heard-bottom-left{
                width: 3.45rem;
                height: .98rem;
            }
            .heard-bottom-left div{
                text-align: center;
                line-height: .49rem;
                position: relative;
                .message{
                    width: .12rem;
                    height: .12rem;
                    position: absolute;
                    color: white;
                    font-size: .16rem;
                    border-radius: 50%;
                    left: 1.86rem;
                    top: 0.11rem;
                    line-height: .2rem;
                    background: red;
                }
            }
            .heard-bottom-left img{
                width: .45rem;
                height: .35rem;
                margin-top: .14rem;
            }
            .heard-bottom-right{
                width: 3.45rem;
                height: .98rem;
            }
            .heard-bottom-right div{
                text-align: center;
                line-height: .49rem;
            }
            .heard-bottom-right img{
                width: .32rem;
                height: .4rem;
                margin-top: .12rem;
            }   
        }
    }
    // 提现
    .Money{
        width: 100%;
        height: 3rem;
        .Money-box{
            width: 6.9rem;
            height: 2.8rem;
            margin: 0px auto;
            margin-top: .68rem;
            background-image: url("../assets/Mymi/MyMoneyImg.png");
            background-size: 6.9rem 2.8rem;
            border-radius: 0.2rem;
            color: #FEFEFF;
            }
            .Money-boxTOp{
                width: 100%;
                height: .7rem;
                font-size: .28rem;
                font-family: "PingFang-SC-Medium";
                line-height: .7rem;
                span{
                    margin-left: .3rem;
                }
            }
            .Money-boxCenter{
                width: 100%;
                height: 1.4rem;
                display: flex;
                div:nth-child(1){
                    width: 3.45rem;
                    height: 1.4rem;
                    line-height: 1.4rem;
                    span{
                        margin-left: .3rem;
                        font-size: .68rem;
                    }
                }
                div:nth-child(2){
                    width: 3.45rem;
                    height: .5rem;
                    .withdrawMoney{
                        width: 2.4rem;
                        height: .64rem;
                        background-image: linear-gradient(to right,rgb(117,239,125) ,rgb(62,172,67));;
                        float: right;
                        margin-top: .46rem;
                        border-radius: .3rem 0px 0px .3rem;
                        font-size: .3rem;
                        line-height: .64rem;
                        display: flex;
                        font-family: "PingFang-SC-Medium"; 
                        .withdrawMoneyImgOne{
                            width: .38rem;
                            height: .38rem;
                            margin-left: .4rem;
                            margin-top: .13rem;
                        }
                        span{
                            margin-left: .26rem;
                        }
                        .withdrawMoneyImg{
                            width: .12rem;
                            height: .22rem;
                            margin-left: .16rem;
                            margin-top: .2rem;
                        }
                    }
                }
            }
            .Money-boxBottom{
                width: 100%;
                height: .7rem;
                font-size: .28rem;
                line-height: .7rem;
                font-family: "PingFang-SC-Medium";
                span{
                    margin-left: .3rem;
                }
                .withdrawMoneyTrwo{
                    width: .12rem;
                    height: .22rem;
                    margin-left: .16rem;
                }
            }   
    }
    //邀请好友
    .friends{
        width: 100%;
        height: 1.8rem;
        div{
            width: 6.9rem;
            height: 1.6rem;
            margin: 0 auto;
            border: 1px solid rgba(210,227,211,0.5);
            border-radius: 0.2rem;
            background: white;
            img{
                width: 6.9rem;
                height: 1.6rem;
            }
        }
    }
    //申请成为代理
    .agency{
        width: 100%;
        height: 1.1rem;
        div{
            width: 6.9rem;
            height: 0.9rem;
            margin: 0 auto;
            border: 1px solid rgba(210,227,211,0.5);
            border-radius: 0.2rem;
            background: white;
            font-size:0;
            line-height:0.9rem;
           .agencyOne{
                display: inline;
                font-size: 0.26rem;
                color: #333333;
                font-family: "PingFang-SC-Medium";
                padding: 0rem 0.25rem;
                // margin: 0.4rem 0rem 0rem 0.25rem;
            }
            .agencyTwo{
                // display: inline;
                font-size: 0.24rem;
                color: #38A83F;
                font-family: "PingFang-SC-Medium";
                margin-left: 3.4rem;
            }
            img{
                // font-size: 0rem;
                display: inline-block;
                width: 0.14rem;
                // height: 0.24rem;
                padding:0.2rem 0rem 0.35rem 0.2rem
            }
        }
    }
    //我的团队
    .MyTeam{
        width: 100%;
        height: 1.64rem;
        .TeamBox{
            width: 6.9rem;
            height: 1.44rem;
            margin: 0 auto;
            border: 1px solid rgba(210,227,211,0.5);
            border-radius: 0.2rem;
            background: white;
            p{
                font-size: 0.26rem;
                color: #333333;
                font-family: "PingFang-SC-Medium";
                margin-top: 0.3rem;
                padding-left: 0.25rem;
            }
            div{
                width: 100%;
                height: 0.8rem;
                font-size: 0rem;
                // background: red;
                .TeamOne{
                    display: inline;
                    font-size: 0.24rem;
                    color: #808080;
                    font-family: "PingFang-SC-Medium";
                    padding: 0.25rem 0.25rem;
                    // margin: 0.4rem 0rem 0rem 0.25rem;
                }
                .TeamTwo{
                    display: inline;
                    font-size: 0.44rem;
                    color: #333333;
                    font-family: "PingFang-SC-Medium";
                    margin-left: 4rem;
                }
                img{
                    // font-size: 0rem;
                    display: inline-block;
                    width: 0.14rem;
                    height: 0.24rem;
                    padding:0.2rem 0rem 0.5rem 0.2rem
                }
            }
        }
    }
    // /* 我的任务 */
    .MyTask{
        width: 100%;
        height: 2.42rem;
        font-family: "PingFang-SC-Medium";
        .MyTask-Box{
            width: 6.9rem;
            height: 2.22rem;
            margin: 0 auto;
            border: 1px solid rgba(210,227,211,0.5);
            border-radius: 0.2rem;
            background: white;
            .MyTask-Box-top{
                width: 100%;
                height: .86rem;
                line-height: .4rem; 
                span{
                    font-size: .28rem;
                    margin-left: .346667rem;
                }
            }
            .MyTask-Box-bottom{
                width: 100%;
                height: 1.34rem;
                display: flex;
                .MyTask-Box-bottomFelt{
                    width: 3.45rem;
                    height: 1.34rem;
                    text-align: center;
                    span:nth-child(1){
                        display: block;
                        font-size: .6rem;
                        // margin-top: .1rem; 
                    }
                    span:nth-child(2){
                        display: block;
                        font-size: .24rem;
                        color: #808080;
                    }
                }
                .MyTask-Box-bottomRight{
                    width: 3.45rem;
                    height: 1.34rem;
                    text-align: center;
                    span:nth-child(1){
                        display: block;
                        font-size: .6rem;
                        // margin-top: .1rem; 
                    }
                    span:nth-child(2){
                        display: block;
                        font-size: .24rem;
                        color: #808080;
                    }
                }

            }
        }

    }
    // /* 常用工具 */
    .MyCommonTools{
        width: 100%;
        height: 3.88rem;
        .MyCommonTools-Box{
            width: 6.9rem;
            height: 3.47rem;
            margin: 0 auto;
            border: 1px solid rgba(210,227,211,0.5);
            background: white;
            border-radius: 0.2rem;
            .MyCommonTools-BoxTop{
                width: 100%;
                height: .73rem;
                line-height: 0; 
                span{
                    font-size: .24rem;
                    line-height: .73rem;
                    margin-left: .26rem;
                } 
            } 
                .VillageHeat-button{
                    width: 100%;
                    height: 2.76rem;
                    display: flex;
                    flex-wrap:wrap;
                    text-align: center;
                    .VillageHeat-button-box{
                        width: 1.7rem;
                        height: 1.2rem;;
                        // margin: 0px 0px 0px 0.6rem; 
                        font-size:0;
                        img{
                            width: .8rem;
                            height: .8rem;
                            margin: 0px .1rem;
                        }
                        p{
                            width: 100%;
                            height: .28rem;
                            font-size: .24rem;
                            // margin-left: -0.25rem;
                        }
                    }
                }
        }
    }
    // 身份认证
        .showModel {
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 5;
            .showBox {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
            margin-top: 3rem;
            background-color: #fff;
            width: 5.75rem;
            height: 5.32rem;
            border-radius: 0.2rem;
            padding: 0.15rem 0.2rem;
            box-sizing: border-box;
            font-size: 0.26rem;
            .one {
                text-align: right;
                i {
                font-size: 0.3rem;
                }
            }
            .two {
                text-align: center;
                margin-top: 0.2rem;
                font-size: 0.36rem;
                color: #333333;
                font-weight: R;
            }
            .three {
                width: 2.04rem;
                height: 2.04rem;
                border-radius: 50%;
                overflow: hidden;
                margin: 0 auto;
                margin-top: 0.3rem;
                img {
                width: 100%;
                height: 100%;
                }
            }
            .four {
                margin: 0 auto;
                width: 3.41rem;
                height: 0.65rem;
                line-height: 0.65rem;
                text-align: center;
                color: #fff;
                font-size: 0.32rem;
                background: rgba(56, 168, 63, 1);
                border-radius: 0.33rem;
                margin-top: 0.45rem;
            }
            }
        }
    .buttom-tab{
        width: 100%;
        height: 0.98rem;
    }
}


</style>